<template>
  <div class="dashboard">
    <h1 class="text-red">Dashboard</h1>
    <p text-blue>Welcome to your dashboard</p>
    <p y-red>测试文本</p>
    <el-button @click="count++">{{ count }}</el-button>
    <el-button @click="confirm"></el-button>
    <!-- <SvgIcon
      icon-name="ep:alarm-clock"
      custom-class="text-yellow w-[24px] h-[24px]"
    ></SvgIcon> -->
    <SvgIcon
      icon-name="ant-design:aim-outlined"
      :custom-class="cClass + ' w-[24px] h-[24px]'"
    ></SvgIcon>

    <el-input v-model="count"></el-input>
  </div>
</template>

<script setup lang="ts" name="Dashboard">
const count = ref(0)
const { proxy } = getCurrentInstance()!

const confirm = () => {
  proxy?.$message({
    message: "This is a confirm message",
    type: "success",
    showClose: true
  })
}

const cClass = ref("text-red")
</script>
